<template>
	<el-dialog center="" title="餐台主题配置" :visible.sync="themeVisible" width="30%" append-to-body="true">
		<el-form :model="dataForm" ref="dataForm" label-width="120px">
			<el-row :gutter="5">
				<el-col :span="12">
					<el-form-item label="空闲" prop="classificationName"><el-color-picker v-model="dataForm.freeColor"></el-color-picker></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="就餐" prop="classificationName"><el-color-picker v-model="dataForm.eatColor"></el-color-picker></el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="5">
				<el-col :span="12">
					<el-form-item label="待清" prop="classificationName"><el-color-picker v-model="dataForm.waitColor"></el-color-picker></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预结" prop="classificationName"><el-color-picker v-model="dataForm.preColor"></el-color-picker></el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="5">
				<el-col :span="12">
					<el-form-item label="停用" prop="classificationName"><el-color-picker v-model="dataForm.stopColor"></el-color-picker></el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="每行显示餐台个数" prop="classificationName"><el-input-number v-model="dataForm.lineTableNum" :min="4" :max="12"></el-input-number></el-form-item>
			<el-form-item prop="classificationName"><el-button type="success" @click="save">完成配置</el-button></el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
export default {
	data() {
		return {
			dataForm: {
				id:'',
				freeColor: '#DCB5FF',
				eatColor: '#FA8072',
				waitColor: '#E1E100	',
				preColor: '#B40431',
				lineTableNum: 8,
				stopColor:'#aaaa7f'
			},
			themeVisible: false
		};
	},
	methods: {
		init() {
			this.themeVisible = true;
			this.$http({
				url: this.$http.adornUrl(`/store/ttabletheme/info`),
				method: 'get',
				params: this.$http.adornParams()
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataForm.id = data.tTableTheme.id;
					this.dataForm.sellerId = data.tTableTheme.sellerId;
					this.dataForm.freeColor = data.tTableTheme.freeColor;
					this.dataForm.eatColor = data.tTableTheme.eatColor;
					this.dataForm.waitColor = data.tTableTheme.waitColor;
					this.dataForm.preColor = data.tTableTheme.preColor;
					this.dataForm.lockColor = data.tTableTheme.lockColor;
					this.dataForm.reserveColor = data.tTableTheme.reserveColor;
					this.dataForm.lineTableNum = data.tTableTheme.lineTableNum;
					this.dataForm.stopColor = data.tTableTheme.stopColor;
				}
			});
		},

		save() {
			this.$http({
				url: this.$http.adornUrl(`/store/ttabletheme/themeSet`),
				method: 'post',
				data: this.$http.adornData({
					id: this.dataForm.id || undefined,
					sellerId: this.dataForm.sellerId,
					freeColor: this.dataForm.freeColor,
					eatColor: this.dataForm.eatColor,
					waitColor: this.dataForm.waitColor,
					preColor: this.dataForm.preColor,
					lockColor: this.dataForm.lockColor,
					reserveColor: this.dataForm.reserveColor,
					stopColor: this.dataForm.stopColor,
					lineTableNum: this.dataForm.lineTableNum
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.themeVisible = false;
							this.$emit('refreshDataList')
						}
					});
				} else {
					this.$message.error(data.msg);
				}
			});
		}
	}
};
</script>

<style></style>
